<div class="container">
    <div class="row">
        <div class="col-12">
            <h2>Video player</h2>

            <div class="videogular-container">
                <videogular vg-player-ready="ctrl.onPlayerReady($API)"
                            vg-complete="ctrl.onCompleteVideo()"
                            vg-error="ctrl.onError($event)"
                            vg-update-time="ctrl.onUpdateTime($currentTime, $duration)"
                            vg-update-volume="ctrl.onUpdateVolume($volume)"
                            vg-update-state="ctrl.onUpdateState($state)"
                            vg-theme="ctrl.config.theme.url"
                            vg-auto-play="ctrl.config.autoPlay"
                            vg-plays-inline="ctrl.config.playsInline">
                    <vg-media vg-src="ctrl.config.sources"
                              vg-tracks="ctrl.config.tracks"
                              vg-loop="ctrl.config.loop"
                              vg-preload="ctrl.config.preload"
                              vg-native-controls="ctrl.config.controls"
                              vg-template="views/directives/vg-media-video.html">
                    </vg-media>

                    <vg-controls vg-autohide="ctrl.config.autoHide" vg-autohide-time="ctrl.config.autoHideTime"
                                 vg-template="views/directives/vg-controls.html">
                        <vg-play-pause-button
                                vg-template="views/directives/vg-play-pause-button.html"></vg-play-pause-button>
                        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
                        <vg-scrub-bar vg-template="views/directives/vg-scrub-bar.html">
                            <vg-scrub-bar-buffer></vg-scrub-bar-buffer>
                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                        </vg-scrub-bar>
                        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
                        <vg-volume>
                            <vg-mute-button vg-template="views/directives/vg-mute-button.html"></vg-mute-button>
                            <vg-volume-bar vg-template="views/directives/vg-volume-bar.html"></vg-volume-bar>
                        </vg-volume>
                        <vg-fullscreen-button
                                vg-template="views/directives/vg-fullscreen-button.html"></vg-fullscreen-button>
                    </vg-controls>

                    <vg-analytics vg-track-info="ctrl.config.plugins.analytics"></vg-analytics>
                    <vg-poster vg-url='ctrl.config.plugins.poster.url'
                               vg-template="views/directives/vg-poster.html"></vg-poster>
                    <vg-buffering vg-template="views/directives/vg-buffering.html"></vg-buffering>
                    <vg-overlay-play vg-template="views/directives/vg-overlay-play.html"></vg-overlay-play>
                </videogular>
            </div>
        </div>
    </div>

    <div id="companionAd"></div>

    <div class="row">
        <div class="col-12"><h2>Video player properties</h2></div>
    </div>

    <div class="row">
        <div class="col-6 col-sm-4 col-lg-4">
            <div>
                <label for="posterInput">Poster url image (png/jpg/gif):</label>
                <input id="posterInput" type="text" class="form-control" ng-model="ctrl.config.plugins.poster.url">
            </div>
        </div>

        <div class="col-6 col-sm-4 col-lg-4">
            <div>
                <label class="checkbox">
                    <input id="autoPlayInput" type="checkbox" ng-model="ctrl.config.autoPlay">Autoplay
                </label>
            </div>
            <div>
                <label class="checkbox">
                    <input id="autoHideInput" type="checkbox" ng-model="ctrl.config.autoHide">Autohide
                </label>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-6 col-sm-4 col-lg-4">
            <div>Theme: {{ctrl.config.theme.url}}</div>
            <div>Poster image: {{ctrl.config.plugins.poster.url}}</div>
            <div>AutoPlay: {{ctrl.config.autoPlay}}</div>
        </div>
        <div class="col-6 col-sm-4 col-lg-4">
            <div>AutoHide: {{ctrl.config.autoHide}}</div>
            <div>State: {{ctrl.state}}</div>
            <div>Time: {{ctrl.currentTime}} / {{ctrl.totalTime || 0}}</div>
            <div>Volume: {{ctrl.volume}}</div>
            <div>Completed: {{ctrl.isCompleted}}</div>
        </div>
        <div class="col-6 col-sm-4 col-lg-4">
            <button ng-click="ctrl.API.play()">Play</button>
            <button ng-click="ctrl.API.pause()">Pause</button>
            <button ng-click="ctrl.API.stop()">Stop</button>
            <button ng-click="ctrl.API.seekTime(30, false)">Move to second 30</button>
            <button ng-click="ctrl.API.seekTime(50, true)">Move to 50%</button>
            <button ng-click="ctrl.changeSource()">Change source</button>
            <button ng-click="ctrl.wrongSource()">Set invalid source</button>
        </div>
    </div>
</div>
